<template>
  <Modal
    v-model:active="transformModalVueActive"
    transfer
    title="转换"
    hide-mask
    draggable
    :width="500"
    :no-footer="true"
    @close="handleCancel"
  >
    <div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">选项</div>
      </div>
      <div class="chose_radiogroup">
        <RadioGroup v-model:value="parameter.module" :options="options" />
      </div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">选择器</div>
      </div>
      <div class="selector-buttons" v-for="type in pickTypes" :key="type.label">
        <button
          class="selector-button"
          :class="{ active: type.label == activeType }"
          @click="onChangeMode(type.label)"
        >
          {{ type.content }}
        </button>
        <button class="icon-button" @click="handleClear">
          <img src="../../assets/delete.svg" alt="" class="icon imgStyle" />
        </button>
      </div>
      <div v-show="parameter.module !== 'scale'">
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">方向</div>
        </div>
        <div class="direction_box">
          <Grid :gap="10" :columns="24">
            <Cell
              :width="8"
              v-for="item in directionList"
              :key="item.direction"
            >
              <div
                class="direction_name"
                :style="{ backgroundColor: item.color }"
              >
                {{ item.name }}
              </div>
              <div class="direction_foot">
                <Button
                  class="mr-5"
                  @click="handleDirectionReset(item.direction)"
                  >{{ item.direction }}</Button
                >
                <NumberInput
                  v-model:value="direction[item.direction]"
                  :min="-1"
                  :max="1"
                  style="width: 72px"
                />
              </div>
            </Cell>
          </Grid>
        </div>
      </div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">参数</div>
      </div>
      <div class="parameter_number">
        <div class="longNumber">重复：</div>
        <div class="parameter_numberinput">
          <NumberInput
            :disabled="parameter.module === 'mirror'"
            v-model:value="parameter.repeatCount"
          ></NumberInput>
        </div>
      </div>
      <div class="parameter_number" v-if="parameter.module === 'translate'">
        <div class="longNumber">距离：</div>
        <div class="parameter_numberinput">
          <NumberInput v-model:value="parameter.distance"></NumberInput>
        </div>
      </div>
      <div class="parameter_number" v-if="parameter.module === 'rotate'">
        <div class="longNumber">角度：</div>
        <div class="parameter_numberinput">
          <NumberInput v-model:value="parameter.angle"></NumberInput>
        </div>
      </div>
      <div class="parameter_number" v-if="parameter.module === 'scale'">
        <div class="longNumber">Uniform Scale：</div>
        <div>
          <Checkbox v-model:checked="parameter.uniformScale">是</Checkbox>
        </div>
      </div>
      <div class="parameter_number" v-if="parameter.module === 'scale'">
        <div class="longNumber">Scale：</div>
        <div class="parameter_numberinput">
          <NumberInput v-model:value="parameter.factor"></NumberInput>
        </div>
      </div>
      <Space :size="48" style="margin: 24px 12%">
        <Checkbox v-model:checked="parameter.deleteOriginal"
          >Delete Original</Checkbox
        >
        <Checkbox v-model:checked="parameter.withElems"
          >Width Related Elements</Checkbox
        >
      </Space>
    </div>
    <div class="foot-box">
      <Button type="primary" @click="() => handleUpdate('+')"
        >{{ MODUEL_NAME[parameter.module] }}
        {{ parameter.module !== "mirror" ? "+" : "" }}</Button
      >
      <Button
        v-if="parameter.module !== 'mirror'"
        type="default"
        @click="() => handleUpdate('-')"
        >{{ MODUEL_NAME[parameter.module] }} -</Button
      >
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  NumberInput,
  Checkbox,
  RadioGroup,
  Grid,
  Cell,
  Space,
  Divider,
  Toast,
  Notice,
} from "cax-ui";
import { ref, reactive, watch } from "vue";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
import { STATUS_CODE, TransformUpdateOptions } from "@/FrontProcessing";

const coreStore = useCoreStore();
const { transformModalVueActive } = storeToRefs(coreStore);

const options = [
  { content: "位移", label: "translate" },
  { content: "旋转", label: "rotate" },
  { content: "镜像", label: "mirror" },
  { content: "缩放", label: "scale" },
];

const MODUEL_NAME: { [key: string]: string } = {
  translate: "位移",
  rotate: "旋转",
  mirror: "镜像",
  scale: "缩放",
};
const pickTypes = [{ label: STATUS_CODE.GEOM_BODY, content: "实体" }];
const activeType = ref(STATUS_CODE.GEOM_BODY);

type Dir = "X" | "Y" | "Z";
const directionList: {
  name: string;
  direction: Dir;
  color: string;
}[] = [
  {
    name: "N1",
    direction: "X",
    color: "#ec808d",
  },
  {
    name: "N2",
    direction: "Y",
    color: "#caf982",
  },
  {
    name: "N3",
    direction: "Z",
    color: "#81d3f8",
  },
];

const parameter = reactive({
  angle: 12.5, // rotate
  distance: 12.5, // translate
  factor: 1.1, // scale
  deleteOriginal: false,
  dir: "1.0 1.0 1.0", // scale 的默认值
  module: "translate",
  origin: "0.000000 0.000000 0.000000", // base node
  repeatCount: 1,
  uniformScale: true,
  withElems: true,
});
const direction = reactive({
  X: 0.0,
  Y: 0.0,
  Z: 1.0,
});
function handleDirectionReset(dir: Dir) {
  let key: Dir;
  for (key in direction) {
    if (key === dir) {
      direction[dir] = direction[dir] ? -direction[dir] : 1.0;
    } else {
      direction[key] = 0;
    }
  }
}

function onChangeMode(code: number) {
  coreStore.setEngineState(code);
}

function handleClear() {
  _global.Engine.selector.clearAll();
}
const getDir = () => `${direction.X} ${direction.Y} ${direction.Z}`;

function handleUpdate(action = "+") {
  const dir = getDir();
  const params: TransformUpdateOptions = {
    action,
    dir,
    module: parameter.module,
    origin: parameter.origin,
    repeatCount: parameter.repeatCount,
    withElems: parameter.withElems ? 1 : 0,
    deleteOriginal: parameter.deleteOriginal ? 1 : 0,
  };
  if (parameter.module === "scale") {
    params.uniformScale = parameter.uniformScale ? 1 : 0;
    params.factor = parameter.factor;
    params.dir = "1.0 1.0 1.0";
  } else if (parameter.module === "translate") {
    params.distance = parameter.distance;
  } else if (parameter.module === "rotate") {
    params.angle = parameter.angle;
  }
  Toast.loading({ content: "转换中", duration: 0 });
  _global.Engine.transform
    .update(params)
    .then((result) => {
      // console.log("transform update res: ", result);
      coreStore.setBomInfo(result);
      coreStore.setEngineState(STATUS_CODE.GEOM_BODY);
      Toast.close();
    })
    .catch((err) => {
      // console.log("transform update err: ", err);
      Toast.close();
      Notice.error(`需要先选中一个实体`);
    });
}

function handleCancel() {
  transformModalVueActive.value = false;
}

watch(transformModalVueActive, (open) => {
  if (open) {
    coreStore.setEngineState(STATUS_CODE.GEOM_BODY);
  } else {
    coreStore.setEngineState(STATUS_CODE.NORMAL);
    _global.Engine.transform.leave(parameter.module);
  }
});
</script>
<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.foot-box {
  margin-top: 32px;
  width: 100%;
  height: 40px;
  text-align: right;
}
.createTo-box {
  padding-left: 40px;
  display: flex;
  justify-content: flex-start;

  :deep(.vxp-select__label) {
    text-align: left;
  }
  :deep(.vxp-option--disabled) {
    color: var(--vxp-content-color-disabled);
  }
  :deep(.vxp-option--disabled:hover) {
    color: var(--vxp-content-color-disabled);
  }
}
.createTo-btn {
  margin-left: 10px;
}
.createTo-text {
  margin-left: 10px;

  height: 30px;
  line-height: 30px;
}
.createTo-select {
  width: 40%;
}
.parameter_number {
  padding: 0 25px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-bottom: 16px;
}
.parameter_numberinput {
  width: 40%;
}
.longNumber {
  width: 30%;
  text-align: right;
}
.chose-box {
  padding-left: 8%;
  margin-bottom: 10px;
}
.radio_item {
  display: inline-block;
  width: 100px;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  display: inline-block;
  height: 32px;
  width: 160px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  height: 32px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #ccc;
  border-left: none;
  cursor: pointer;
  background-color: #fff;
}
.icon-button:hover {
  background-color: var(--vxp-color-warning-opacity-7);
}
.imgStyle {
  height: 100%;
}
.radio_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.chose_radiogroup {
  margin-bottom: 10px;
  margin-left: 12%;
}
.chose_radiogroup :deep(.vxp-radio-vars) {
  --vxp-radio-series-span: 30px;
}
.direction_box {
  margin-bottom: 16px;
  padding: 0 40px;
}
.direction_name {
  text-align: center;
  height: 22px;
  line-height: 22px;
  border-radius: 5px;
}
.direction_foot {
  margin-top: 6px;
  display: flex;
}
.direction_foot :deep(.vxp-button-vars) {
  --vxp-button-min-width: 48px;
}
</style>
